import React, { useEffect, useState, useCallback } from 'react';
import { connect } from 'dva';
import { Table, Button, Popconfirm, message } from 'antd';
import { PlusOutlined, DownloadOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import TableSelector from './components/TableSelector';
import SimulationLineChart from './components/SimulationLineChart';
import style from '@/pages/IndexPage.css';

function MachArchives({ dispatch, user, mach }){
    const { authorized } = user;
    const { simulationInfo, currentPage, total } = mach;
    useEffect(()=>{
        if ( authorized ) {
            dispatch({ type:'mach/fetchMachSimulationInfo'});
        }
    },[authorized])
    
    const handleSearch = useCallback((obj) => {
        dispatch({ type: 'mach/setOptional', payload:obj });
        dispatch({ type:'mach/fetchMachSimulationInfo'});
    }, []);
    
    return (
        <div className={style['page-container']}>
            <div style={{ height:'90px' }}>
                <TableSelector onSearch={handleSearch} />
            </div>
            <div style={{ height:'calc( 100% - 90px)', paddingTop:'1rem' }}>
                <div className={style['card-container']} style={{ paddingTop:'1rem' }}>
                    <SimulationLineChart data={simulationInfo} title='' />
                </div>
                
            </div>
        </div>
    )
}

export default connect(({ user, mach })=>({ user, mach }))(MachArchives)